<!DOCTYPE html>
<html>
<body>
<canvas id="preserve-canvas3d" width="10" height="10"></canvas>
<canvas id="nonpreserve-canvas3d" width="10" height="10"></canvas>
<script src="../../resources/js-test.js"></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

var preserve_canvas3D;
var nonpreserve_canvas3D;

function renderWebGL(gl) {
    gl.clearColor(0.5, 1, 0.3, 0.1);
    gl.clear(gl.COLOR_BUFFER_BIT);
}

function asyncTest() {
    debug("Check if back buffer (toDataURL) is equal to front buffer (getImageSourceURL) one frame after drawing webgl contents.")
    debug("1) when drawingBuffer is preserved.")
    shouldBeTrue("preserve_canvas3D.toDataURL('image/png') == internals.getImageSourceURL(preserve_canvas3D)");
    debug("2) when drawingBuffer is not preserved. They must be different.")
    shouldBeTrue("nonpreserve_canvas3D.toDataURL('image/png') != internals.getImageSourceURL(nonpreserve_canvas3D)");
    if (window.testRunner)
        testRunner.notifyDone();
}

function startTestAfterFirstPaint() {
    preserve_canvas3D = document.getElementById('preserve-canvas3d');
    var preserve_gl = preserve_canvas3D.getContext('webgl', {preserveDrawingBuffer: true, premultipliedAlpha: false});
    nonpreserve_canvas3D = document.getElementById('nonpreserve-canvas3d');
    var nonpreserve_gl = nonpreserve_canvas3D.getContext('webgl', {preserveDrawingBuffer: false, premultipliedAlpha: false});

    // prepare webgl contents.
    renderWebGL(preserve_gl);
    renderWebGL(nonpreserve_gl);

    debug("Check if back buffer (toDataURL) is equal to front buffer (getImageSourceURL)")
    debug("1) when drawingBuffer is preserved.")
    shouldBeTrue("preserve_canvas3D.toDataURL('image/png') == internals.getImageSourceURL(preserve_canvas3D)");
    debug("2) when drawingBuffer is not preserved.")
    shouldBeTrue("nonpreserve_canvas3D.toDataURL('image/png') == internals.getImageSourceURL(nonpreserve_canvas3D)");

    runAfterLayoutAndPaint(asyncTest);
}

window.onload = function () {
    window.requestAnimationFrame(startTestAfterFirstPaint);
}
</script>
</body>
</html>
